<!-- eslint-disable sort-imports -->
<script lang="jsx" setup>
import { getCurrentInstance, nextTick, ref, watch, watchEffect } from 'vue';
import { message, Input } from 'ant-design-vue';
import Modal from '@/components/common/modal.vue';
import underReview from '@/assets/imgs/examine-icon/under-review.png';
import unaudited from '@/assets/imgs/examine-icon/unaudited.png';
import audited from '@/assets/imgs/examine-icon/audited.png';
import { addingtoolData } from '@/service/api/modules/cut/v-cut';
import { get } from '@/service/api/api';
import { isNonNegativeInteger } from '@/utils';

import { useAuthStore } from '@/store/modules/auth';

const props = defineProps({
  visible: {
    type: Boolean,
    default: () => false
  }
});

const emit = defineEmits(['close', 'addSuccess']);

const topFormList = ref([
  {
    type: 'tabs',
    span: 24,
    name: '刀具组信息'
  },
  {
    type: 'input',
    key: 'knifeNum1',
    label: '刀具上编号',
    span: 12
  },
  {
    type: 'input',
    key: 'knifeNum2',
    label: '刀具下编号',
    span: 12
  },
  {
    type: 'input',
    key: 'knifeDiameter1',
    label: '刀具直径1',
    span: 12
  },
  {
    type: 'input',
    key: 'knifeDiameter2',
    label: '刀具直径2',
    span: 12
  }
]);

const modelVisible = ref(props.visible);
const modleAddLoading = ref(false);

const topFormRef = ref(null);

const model = ref(getModel(topFormList.value));

function getModel(arr) {
  const obj = {};
  arr.forEach(item => {
    if (item.key) {
      obj[item.key] = null;
    }
  });
  console.log('obj :>> ', obj);
  return obj;
}

async function handleOk() {
  const form = { ...topFormRef.value };
  await form.validateForm();
  modleAddLoading.value = true;
  try {
    const { error } = await addingtoolData(model.value);
    if (!error) {
      message.success('新增刀具成功!');
      handleClose();
      emit('addSuccess');
    }
  } finally {
    modleAddLoading.value = false;
  }
}

function handleClose() {
  modelVisible.value = false;
  model.value = getModel(topFormList.value);
  emit('close');
}

watch(
  () => props.visible,
  val => {
    modelVisible.value = val;
  }
);
</script>

<template>
  <Modal
    v-model:visible="modelVisible"
    title="新增刀具"
    height="450px"
    width="700px"
    :destroy-on-close="true"
    :centered="true"
    @close="handleClose"
  >
    <div class="add-v-cut-tool-record-form">
      <Form ref="topFormRef" v-model:model="model" :form-list="topFormList"></Form>
    </div>

    <template #footer>
      <div class="modal-footer">
        <AButton type="primary" :loading="modleAddLoading" @click="handleOk">保 存</AButton>
        <AButton @click="handleClose">关 闭</AButton>
      </div>
    </template>
  </Modal>
</template>

<style lang="scss" scoped>
.add-v-cut-tool-record-form {
  border: 1px solid #ccc;
  padding: 0 30px;
  overflow: auto;
  position: relative;
  padding-top: 36px;
  padding-bottom: 15px;
  .state {
    position: absolute;
    top: 0;
    right: 100px;
    img {
      height: 80px;
    }
  }
}
</style>
